<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>点餐下单</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<!--标准mui.css-->
		<link href="css/mui.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="css/mui.picker.min.css" />
		<link rel="stylesheet" type="text/css" href="css/style.css" />
		<link rel="stylesheet" type="text/css" href="css/icons-extra.css" />
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a href="choice-menus.html" class=" mui-icon  mui-pull-left title-left">
		        	<img src="img/点菜.png"/ width="60px" height="32px" style="margin-top: 6px;">
			</a>
			<h1 class="mui-title">已选订单(外卖)</h1>
			<a href="person-center.html" class="mui-icon  mui-pull-right title-right" id="btn1">
				<img src="img/个人中心.png"/ width="60px" height="32px" style="margin-top: 6px;">
			</a>
		</header>
		<div class="mui-content">
			<div class="order">
				<div class="order-first">
					<span>菜单</span>
					<a href="choice-menus.html">
		    			<button>
		    				<span class="mui-icon mui-icon-plusempty"></span>
		    				加菜
		    			</button>
		    		</a>
				</div>
				<div class="order-list">
					<ul>
						<li>
							<img src="img/排骨.jpg" />
							<span class="order-list-name">腊味排骨蒸饭+可乐+奶茶</span>
							<span class="order-list-price">¥12.00</span>
							<span class="order-list-number">X2</span>
						</li>
						<li>
							<img src="img/排骨.jpg" />
							<span class="order-list-name">腊味排骨蒸饭+可乐+奶茶</span>
							<span class="order-list-price">¥23.00</span>
							<span class="order-list-number">X1</span>
						</li>
						<li>
							<p>配送费<span class="order-list-price">¥1.00</span></p>
							<p>餐盒费<span class="order-list-price">¥2.00</span></p>
						</li>
					</ul>

				</div>
				<div style="padding: 0px 0px;">
					<ul>

						<li id="daodian"
							 class="mui-table-view-cell mui-checkbox mui-right">
							<input  type="checkbox" value="1">到店自提
						</li>
					</ul>
				</div>

				<div class="order-takeout-waimai" style="padding: 0px;">
					<ul>

						<li class="mui-table-view-cell mui-media">

							<a href="order-takeout-dispatching.html" class="mui-navigate-right">
								<span>设置配送信息</span>
							</a>
						</li>
						<li>
							<button data-options='{}' class="btn mui-btn mui-btn-block" style="">选择送达时间 <span id="span1" style="float: right;"></span></button>
						</li>
					</ul>

				</div>
				<div class="order-takeout-ziti" style="padding: 0px;">
					<ul>

						<li class="mui-table-view-cell mui-media">

							<a href="order-takeout-arrive.html" class="mui-navigate-right">
								<span>设置自提者信息</span>
							</a>
						</li>
						
					</ul>

				</div>
				
				<div style="padding: 10px 0px;">
					<ul>
						<li class="mui-table-view-cell mui-radio mui-right" id='confirmBtn'>
							<input name="radio" type="radio">会员卡支付
							<div style="height: 100%;width: 100px;position: absolute;right: 40px;top: 0px;text-align: center;">
								<span style="display: block;color: #999999;">余额:10元</span>
								<span style="display: block;color: #ff5053;">VIP价:¥40</span>
							</div>
						</li>
						<li class="mui-table-view-cell mui-radio mui-right">
							<input name="radio" type="radio">微信支付
						</li>
					</ul>
				</div>
				<div style="padding: 0px;">
					<div class="mui-input-row">
						<label style="width: 30%;">备注信息</label>
						<input type="text" class="mui-input-clear" placeholder="辣、不辣、忌口等请在此备注" style="width: 70%;float: left;">
					</div>
				</div>

			</div>

		</div>
		<foot>
			<div class="mui-bar mui-bar-tab order-foot">
				合计 <span class="order-foot-money">¥42.00</span>
				<div class="order-foot-confirm">
					确认订单
				</div>
			</div>
		</foot>
		<div style="height: 50px;"></div>
		<script src="js/mui.min.js"></script>
		<script src="js/jquery-2.0.0.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/mui.picker.min.js" type="text/javascript" charset="utf-8"></script>
		<script>
			(function($) {
				$.init();
				var daodian = $('#daodian')[0];
				var ss = $('#span1')[0];
				var result = $('#result')[0];
				var btns = $('.btn');
				btns.each(function(i, btn) {
					btn.addEventListener('tap', function() {
						var optionsJson = this.getAttribute('data-options') || '{}';
						var options = JSON.parse(optionsJson);
						var id = this.getAttribute('id');
						/*
						 * 首次显示时实例化组件
						 * 示例为了简洁，将 options 放在了按钮的 dom 上
						 * 也可以直接通过代码声明 optinos 用于实例化 DtPicker
						 */
						var picker = new $.DtPicker(options);
						picker.show(function(rs) {
							/*
							 * rs.value 拼合后的 value
							 * rs.text 拼合后的 text
							 * rs.y 年，可以通过 rs.y.vaue 和 rs.y.text 获取值和文本
							 * rs.m 月，用法同年
							 * rs.d 日，用法同年
							 * rs.h 时，用法同年
							 * rs.i 分（minutes 的第二个字母），用法同年
							 */
							ss.innerText = rs.text;
							//							result.innerText = '选择结果: ' + rs.text;
							/* 
							 * 返回 false 可以阻止选择框的关闭
							 * return false;
							 */
							/*
							 * 释放组件资源，释放后将将不能再操作组件
							 * 通常情况下，不需要示放组件，new DtPicker(options) 后，可以一直使用。
							 * 当前示例，因为内容较多，如不进行资原释放，在某些设备上会较慢。
							 * 所以每次用完便立即调用 dispose 进行释放，下次用时再创建新实例。
							 */
							picker.dispose();
						});
					}, false);
				});
			})(mui);
			var waimai = $('.order-takeout-waimai');
			var ziti =$('.order-takeout-ziti');
			var a=0;
			ziti.hide();
			$('#daodian').click(function(){

				if(a==0){
					ziti.show();
					waimai.hide();
					a=1;
				}
				else if(a==1){
					ziti.hide();
					waimai.show();
					a=0;
				}
			})
			
			document.getElementById("confirmBtn").addEventListener('tap', function() {
				var btnArray = ['去充值', '暂时不'];
				mui.confirm('您的余额不足，是否要充值？', '尊敬的用户', btnArray, function(e) {
					if(e.index == 1) {

					} else {

					}
				})
			});
		</script>
	</body>

</html>